<template>
  <el-form>
    <el-input
      placeholder="请输入想要搜索的信息"
      class="input"
      suffix-icon="el-icon-search"
      @focus="focus"
      @blur="blur"
     @input="querySearch(keyWord)"
      v-model="keyWord"
    >
    </el-input>

    <el-card>
        <el-empty :image-size="200" v-show="noData"></el-empty>
    <el-menu
      class="el-menu-vertical-demo">    
      <el-menu-item v-for="item in message" :index="item.value" :key="item.name">
     <el-col :span="2">
        <span><i class="el-icon-document"></i></span>
     </el-col><span slot="title">{{item.value}}</span>
      </el-menu-item>
    </el-menu>
    </el-card>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    name:'Search',
    data() {
        return {
            message:[],
            noData: false,
            keyWord: "",
        }
    },
  computed: {
    ...mapGetters("navAbout", ["listsCount"]),
  },
  methods: {
    focus() {
      this.searchSpan = 5;
    },
    blur() {
      this.searchSpan = 3;
    },
    querySearch(queryString) {
      //我这里的allInfos是从父组件传过来的，在组件从父组件传值
      this.allInfos = this.listsCount.map((terminal) => {
        return {
          value: terminal.title,
          name: terminal.id,
        };
      });

      let results = this.allInfos;

      results = queryString
        ? results.filter(this.createFilter(queryString))
        : results;
      //cb是回调函数，返回筛选出的结果数据到输入框下面的输入列表
      if (results.length === 0) {
        this.noData=true
        results = [];   
        this.message=results
      } else {
        this.noData=false
        this.message=results     
      }
    },
    //该方法仿写官方文档，如果没有特别的需求，该方法改动不大
    createFilter(queryString) {
      console.log(queryString);
      return (item) => {
        return item.value.toUpperCase().match(queryString.toUpperCase());
      };
    },
    //根据传进来的状态改变建议输入框的状态（展开|隐藏）
    changeStyle(status, className) {
      let dom = document.querySelectorAll(className);
      dom[0].style.display = status;
      console.log(dom);
    },
    handleSubmit() {
      this.changeStyle("none", ".el-card-suggestion");

    },
  },
};
</script>

<style lang="less" scoped>
.el-card{
    height: 50vh;
    overflow-y: scroll;
}
.el-menu-item:hover :nth-child(2)::after{
   
    position: absolute;
    right: 20px;
    content: "↶跳转到此页面";
    transition: all .10s;
    color:rgb(32, 155, 222) ;
}
.el-menu{
  border: none !important;
}
.el-menu-item, .el-submenu__title{
    white-space: normal;
    height: auto;
    line-height: 25px;
    list-style: none;
    padding:5px 5px;
  }
  .el-menu-item{
    position: relative;
    padding-left: 0px !important;
  }
.el-autocomplete-suggestion__wrap{
    display: none !important;
}
.el-autocomplete-suggestion{
    display: none !important;
}
</style>
